<template>
  <view class="work-container">
	<!--搜索-->
	<view class="container">
	    <input v-model="inputValue" class="input" placeholder="请输入查询的单号" />
	    <button @click="search" class="button">查询</button>
	</view>
    <!-- 宫格组件 -->
    <view class="grid-body">
      <uni-grid :column="7" :showBorder="false" @change="changeGrid">
        <uni-grid-item class="box">
          <view class="grid-item-box">
			<view class="iconfont icon" style="font-size: 30px;">&#xe606;</view>
            <text class="text" style="display: block;margin-left:50rpx;">发货仓待签收</text>
          </view>
        </uni-grid-item>
		<uni-grid-item>
		  <view class="grid-item-box">
			<view class="iconfont icon" style="font-size: 20px;">&#xe60d;</view> 
		  </view>
		</uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <view class="iconfont icon" style="font-size: 30px;">&#xe610;</view>
            <text class="text">待拆检</text>
          </view>
        </uni-grid-item>
		<uni-grid-item>
		  <view class="grid-item-box">
			<view class="iconfont icon" style="font-size: 20px;">&#xe60d;</view> 
		  </view>
		</uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <view class="iconfont icon" style="font-size: 30px;">&#xe8b6;</view>
            <text class="text">待装箱</text>
          </view>
        </uni-grid-item>
		<uni-grid-item>
		  <view class="grid-item-box">
			<view class="iconfont icon" style="font-size: 20px;">&#xe60d;</view> 
		  </view>
		</uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
           <view class="iconfont icon" style="font-size: 30px;">&#xe626;</view>
            <text class="text">待发货</text>
          </view>
        </uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
           <view class="iconfont icon" style="font-size: 30px;">&#xe605;</view>
            <text class="text">已完成</text>
          </view>
        </uni-grid-item>
		<uni-grid-item>
		  <view class="grid-item-box">
			<view class="iconfont icon" style="font-size: 20px;">&#xeafb;</view> 
		  </view>
		</uni-grid-item>
        <uni-grid-item>
          <view class="grid-item-box">
            <view class="iconfont icon" style="font-size: 30px;">&#xe606;</view>
            <text class="text">待签收</text>
          </view>
        </uni-grid-item>
		<uni-grid-item>
		  <view class="grid-item-box">
			<view class="iconfont icon" style="font-size: 20px;">&#xeafb;</view> 
		  </view>
		</uni-grid-item>
		<uni-grid-item>
		  <view class="grid-item-box"> 
		    <view :style="{ color: status === 1 ? '#E99D42' : 'black' }" class="iconfont icon" style="font-size: 30px;">&#xe601;</view>
		    <text :style="{ color: status === 1 ? '#E99D42' : 'black' }" class="text">到货待支付</text>
		  </view>
		</uni-grid-item>
		<uni-grid-item>
		  <view class="grid-item-box">
			<view class="iconfont icon" style="font-size: 20px;">&#xeafb;</view> 
		  </view>
		</uni-grid-item>
		<uni-grid-item>
		  <view class="grid-item-box">
		    <view class="iconfont icon" style="font-size: 30px;">&#xe883;</view>
		    <text class="text">运输中</text>
		  </view>
		</uni-grid-item>
      </uni-grid>
    </view>
	<!-- tab切换标题 -->
	<view style="padding-top: 10px;width: 95%;margin: auto;">
	<u-subsection :list="list" activeColor="#E99D42" :current="curNum" @change="sectionChange"></u-subsection>	
	</view>
	<view class="main">
		<!-- <u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png"></u-empty> -->
		<view v-show="curNum==0" class="order">
			<h4>2023-09-12 17:00:00
			<span v-show="curNum==0">发货仓待签收</span>
			</h4>
			<view class="order-detail">
				<view style="display: flex;">
					<image src="../../static/images/banner/1.jpg"></image>
					<view style="margin-left: 10px;">
						<h2>包裹备注：无</h2>
						<h2 style="margin-top: 20px;">订单号：1223154154154</h2>
					</view>
				</view>
				<view>×1</view>
			</view> 
		</view>
		<view class="order">	
			<h4>2023-09-12 17:00:00
			<span v-show="curNum==0">待发货</span>
			<span v-show="curNum==1">待支付</span>
			<span v-show="curNum==2">已完成</span>
			<span v-show="curNum==3">待评价</span>
			</h4>
			<view class="order-detail">
				<view style="display: flex;">
					<image src="../../static/images/banner/1.jpg"></image>
					<view style="margin-left: 10px;">
						<h2>包裹备注：无</h2>
						<h2 style="margin-top: 20px;">箱号:1-1</h2>
					</view>
				</view>
				<view>×1</view>
			</view> 
						<h4>2023-09-12 17:00:00
						<span v-show="curNum==0">待发货</span>
						<span v-show="curNum==1">待支付</span>
						<span v-show="curNum==2">已完成</span>
						<span v-show="curNum==3">待评价</span>
						</h4>
						<view class="order-detail">
							<view style="display: flex;">
								<image src="../../static/images/banner/1.jpg"></image>
								<view style="margin-left: 10px;">
									<h2>包裹备注：无</h2>
									<h2 style="margin-top: 20px;">箱号:1-2</h2>
								</view>
							</view>
							<view>×1</view>
						</view>	
		<button v-show="curNum==0||curNum==2||curNum==3" style="background-color:#F4CE98;color: black;font-size: 14px;" disabled="true">大箱子号：1&nbsp;&nbsp;普货</button>
		<button v-show="curNum==1" style="background-color:#F4CE98;color: black;font-size: 14px;" disabled="true">大箱子号：1&nbsp;&nbsp;普货&nbsp;&nbsp;&nbsp;&nbsp;费用：￥88</button>	
	</view>
	<view v-if="curNum==1" style="margin-top: 10px;text-align: center;">
		<p style="margin-bottom: 10px;">合计实付：￥88</p>
		<button type="default" size="mini" style="background-color:#E99D42;color: black;" @click="pay">立即支付</button>
	</view>
	<view v-if="curNum==3" style="margin-top: 10px;text-align: center;">
		<button type="default" size="mini" style="background-color:#E99D42;color: black;" @click="evaluate">立即评价</button>
	</view>
	</view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
		   inputValue: "",
		    // list: ['全部订单','待支付', '已完成', '待评价'],
		   				// 或者如下，也可以配置keyName参数修改对象键名
		    list: [
				{name: '全部订单'}, 
				{name: '待支付'}, 
				{name: '已完成'},
				{name: '待评价'},
				],	
			curNum:0,
			// status:1,//假如订单状态为1为待支付
      }
    },
    methods: {
		search(e) {
		      // 在这里处理查询逻辑，例如调用后端接口获取包裹信息
		      console.log("查询单号：", this.inputValue);
		    },
		sectionChange(index) {
							this.curNum = index;
							console.log(index)
						},
      changeGrid(e) {
        this.$modal.showToast('模块建设中~')
      },
	  pay(){
		  uni.navigateTo({
		  	url:'/pages/package/pay'
		  })
	  },
	  evaluate(){
		  uni.navigateTo({
		  	url:'/pages/package/evaluate'
		  })
	  }
    }
  }
</script>

<style lang="scss">
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    min-height: 100%;
    height: auto;
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.input {
  width: 90%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius:10px;
  padding: 0 10px;
  margin-bottom: 20px;
  position: relative;
}

.button {
  width: 20%;
  height: 40px;
  background-color: #E99D42;
  color: #fff;
  border-radius:10px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  right:30rpx;
  top:0
}
  /* #endif */
  .box{
	  height: 160rpx;
  }
.grid-body{
	width: 95%;
	height: 300rpx;
	margin: auto;
	border: 1px solid #BBBBBB;
}
  .text {
    text-align: center;
    font-size: 26rpx;
    margin-top: 10rpx;
	white-space: nowrap;
  }
  .grid-item-box {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
  }

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
  }
.main{
	width: 95%;
	margin: auto;
	margin: 10px;
}
.order{
	background-color: #EFEFEF;
	border-radius: 10px;
	margin-top: 10px;
}
.order h4{
	height:60rpx;
	border-bottom: 1px solid gray;
	padding: 0 10px;
	display: flex;
	align-items:center;
	justify-content: space-between;
}
.order-detail{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:10px;
}
.order-detail image{
	width: 60px;
	height: 60px;
	border-radius: 5px;
}
  @media screen and (min-width: 500px) {
    .uni-swiper-dot-box {
      width: 400px;
      /* #ifndef APP-NVUE */
      margin: 0 auto;
      /* #endif */
      margin-top: 8px;
    }
  }
</style>
